<template>
	<view class="flex_c_c page">
		<view class="flex_r fa_c fj_b top" :style="{ top: $store.state.StatusBar.statusBar + 'px' }">
			<view class="top-icon" @click="back()">
				<u-icon name="arrow-left" size="42rpx" color="#fff"></u-icon>
			</view>
		</view>
		<view class="text_38 title c-fff">
			账号注册
		</view>
		<view class="form">
			<view class="flex_r form-row">
				<view class="text_34 form-row-title c-fff">
					+86
				</view>
				<view class="flex1 form-row-input">
					<input v-model="formData.loginname" type="text" class="c-fff" placeholder="请输入手机号">
				</view>
				<view class="m-line">
					<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
				</view>
			</view>
			<view class="flex_r form-row">
				<view class="text_34 form-row-title c-fff">
					验证码
				</view>
				<view class="flex1 form-row-input">
					<input v-model="formData.code" type="text" class="c-fff" placeholder="请输入验证码">
				</view>
				<view class="form-row-code c-primary" @click="sms">
					获取验证码
				</view>
				<view class="m-line">
					<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
				</view>
			</view>

			<view class="flex_r form-row">
				<view class="text_34 form-row-title c-fff">
					密码
				</view>
				<view class="flex1 form-row-input">
					<input v-model="formData.password" type="text" class="c-fff" placeholder="请输入密码" password>
				</view>
				<view class="m-line">
					<m-line color="#B8B8B8" length="100%" :hairline="true"></m-line>
				</view>
			</view>

		</view>

		<view class="botton">
			<view class="size_white text_30 button" @click="submit">
				注册
			</view>
			<view class="icon_ agreement">
				<view class="">
					<u-checkbox-group shape="circle" activeColor="#FDB175" v-model="checked" @change="checkboxChange">
						<u-checkbox :name="1">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="c-fff f-28">
					同意用户协议<span @click="goPrivacy">《隐私政策》</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { genTestUserSig } from '@/im/debug/GenerateTestUserSig.js';
import md5 from '@/utils/md5.js';
export default {
	data() {
		return {
			checked: [],
			formData: {
				loginname: '',
				code: '',
				password: '',
			}
		}
	},
	methods: {
		back(){
			uni.navigateBack()
		},
		checkboxChange(e) {
			this.checked = e
		},
		goPrivacy() {
			getApp().globalData.webviewUrl='https://www.xksndf2002.cn/privacy-lalaq.html'
			uni.navigateTo({
				url: '/pages/webview/webview'
			})
		},
		async sms() {
			let res = await this.$c.post('/app/zhuce/sendCode?loginname=' + this.formData.loginname)
			if (res.code != 0) {
				this.$c.show(res.msg)
			} else {
				this.$c.show('短信已发送')
			}
		},
		submit() {
			if (!this.checked) {
				this.$c.show('请先同意用户协议')
				return;
			}
			this.loginTo()
		},
		async loginTo() {
			let url = "/app/login/login" + 
				'?loginname=' + this.formData.loginname + 
				'&password=' + md5.hex_md5(this.formData.password) + 
				'&loginType=2' + 
				'&code=' + this.formData.code;
			let res = await this.$c.post(url);
			if (res.code != 0) {
				this.$c.show(res.msg);
				return;
			}
			try{
				let token = res.data.token
				let userID = res.data.user.tengxuncode.toString();
				const userSig = genTestUserSig(userID).userSig;
				getApp().globalData.userInfo = {
					token,
					userSig,
					userID
				};
				uni.setStorageSync('userInfo', getApp().globalData.userInfo);
			}catch(e){
			}
			
			this.saveCache(res);
			const iswanshan = res.data.user.iswanshan;
			if (2==iswanshan) {
				uni.navigateTo({
					url: '/pages/m-pages/m-login/completeInfo',
					fail: (res) => {
						this.$c.show(JSON.stringify(res))
					}
				})
			} else {
				uni.switchTab({
					url: '/pages/m-pages/m-home/dazi',
					fail: (res) => {
						this.$c.show(JSON.stringify(res))
					}
				});
			}
		},
		saveCache(res) {
			uni.setStorageSync('token', res.data.token);
			uni.setStorageSync('userId', res.data.user.id);
			uni.setStorageSync('userTxCode', res.data.user.tengxuncode);
			uni.setStorageSync('userName', res.data.user.nick);
			uni.setStorageSync('userPic', res.data.user.pic);
			uni.setStorageSync('userSex', res.data.user.sex);
			//初始化IM
			getApp().isLogin();
		},
		
		
	}
}
</script>

<style scoped lang="scss">
.page {
	position: relative;
	box-sizing: border-box;
	padding: 0 50rpx;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
}

.top {
	position: absolute;
	top: 0;
	left: 40rpx;
	width: 100%;
	height: 100rpx;

	.top-icon {
		width: 44rpx;
		height: 44rpx;
	}
}

.title {
	width: 100%;
	height: 200rpx;
	line-height: 200rpx;
	margin-bottom: 20rpx;
}

.form {
	width: 100%;

	.form-row {
		position: relative;
		width: 100%;
		height: 100rpx;
		margin-bottom: 20rpx;

		.form-row-title {
			width: 170rpx;
			line-height: 100rpx;
		}

		.form-row-input {
			height: 100%;

			input {
				width: 100%;
				height: 100%;
			}
		}

		.form-row-code {
			box-sizing: border-box;
			padding-left: 10rpx;
			line-height: 100rpx;
			color: $uni-color-primary;
		}

		.m-line {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			right: 0;
		}
	}
}

.botton {
	width: 100%;
	margin-top: 140rpx;
	margin-bottom: 100rpx;

	.button {
		width: 100%;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);
		margin-bottom: 20rpx;
	}

	.agreement {
		width: 100%;
		height: 50rpx;

		.checkbox {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
			box-sizing: border-box;
			border: 1px solid #e6166a;
			margin-right: 20rpx;

			.checkbox-box {
				width: 40rpx;
				height: 40rpx;
				box-sizing: border-box;
			}
		}
	}

}
</style>